<template>
  <div
    ref="floatButton"
    class="float-button"
    :style="{'width': itemWidth+'px','height': itemHeight+'px','left': left+'px','top': top+'px'}"
    @touchstart.prevent="(e) => {dragStart(e)}"
    @touchend.prevent="(e) => {dragEnd(e)}"
    @touchmove.prevent="(e) => {drag(e)}"
    @click="goBack"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: "FloatButton",
  data() {
    return {
      clientWidth: 0,
      clientHeight: 0,
      top: 0,
      left: 0,
      gapWidth: 10,
      itemWidth: 50, // 图标的宽度
      itemHeight: 50, // 图标的高度
      loop: 0,
      move: -1
    };
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
    this.left = this.gapWidth;
    this.top = this.clientHeight * 0.5;
    window.addEventListener("resize", this.renderResize, false);
  },
  destroyed() {
    window.removeEventListener("resize", this.renderResize, false);
  },
  computed: {
  },
  methods: {
    //监测屏幕是竖屏还是宽屏
     renderResize() {
        this.clientWidth = document.documentElement.clientWidth
        this.clientHeight = document.documentElement.clientHeight
        if(this.clientWidth > this.clientHeight) {
            console.log('横屏')
        }else{
            console.log('竖屏')
        }
        this.resetPosition()
    },
    resetPosition() {
      this.left = this.gapWidth;
      this.top = this.clientHeight * 0.5;
    },
    dragStart(e) {
      console.log("dragStart", e)
      let self = this;
      //执行长按的内容
      self.loop = setTimeout(function() {
        self.loop = 0;
      }, 500);

      this.$refs.floatButton.style.transition = "none";
      self.move = -1;
    },
    dragEnd(e) {
      console.log("dragEnd", e);
      let self = this;
      clearTimeout(self.loop);
      //这里click内容
      if (self.loop !== 0) {
        if (self.move <= 0) {
          self.goBack();
        }
      }

      if (this.left > this.clientWidth - this.itemWidth - this.gapWidth) {
        this.left = this.clientWidth - this.itemWidth - this.gapWidth;
      } else if (this.left < this.gapWidth) {
        this.left = this.gapWidth;
      }

      if (this.top > this.clientHeight - this.itemWidth - this.gapWidth) {
        this.top = this.clientHeight - this.itemWidth - this.gapWidth;
      } else if (this.top < this.gapWidth) {
        this.top = this.gapWidth;
      }

      this.$refs.floatButton.style.transition = "all 0.3s";
    },
    drag(e) {
      // console.log("drag", e)
      if (e.targetTouches.length === 1) {
        let touch = e.targetTouches[0];
        this.left = touch.clientX - this.itemWidth / 2;
        this.top = touch.clientY - this.itemHeight / 2;
      }
      this.move++;
    },
    goBack() {
      console.log("goBack")
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.float-button {
  color: #666;
  z-index: 2000;
  transition: all 0.3s;
  position: fixed;
  white-space: nowrap;
}
</style>